<template>
	<view class="">
		<view class="topBox" @tap="logout" :style="{paddingTop:jiaonangHight+'px',height:selectHeight+'px'}">
			<view class="topBox_title">
				医修智汇
			</view>
			<image src="../../static/index/top.png" mode=""></image>

		</view>
		<view class="content">
			<!-- 输入框 -->
			<view class="content-input">
				<image src="../../static/serach.png" mode=""></image>
				<input type="text" placeholder="输入客户名称或者工单号或者序号" disabled="true" @tap="jump_serach"
					placeholder-style="font-size: 28rpx;font-weight: 500;color: #C6C7CB;" value="" />
			</view>
			<view class="content-card">
				<view class="content-card-left">
					<view class="content-card-left-t">
						正在进行中
					</view>
					<view class="content-card-left-a">
						<text class="content-card-left-num">{{ongoing}}</text>
						<text class="">/单</text>
					</view>
				</view>
				<view class="content-card-right">
					<image src="../../static/index/name-icon.png" mode=""></image>
					<text>{{name_user}}</text>
				</view>
				<view class="content-card-btm">
					<view class="content-card-btm-box" @tap="jumpRepair(0)">
						<view class="content-card-btm-box-a">
							报修工单
						</view>
						<view class="content-card-btm-box-b">
							{{dara_}}
						</view>
					</view>
					<view class="content-card-btm-box" @tap="jumpRepair(1)">
						<view class="content-card-btm-box-a">
							维保工单
						</view>
						<view class="content-card-btm-box-b">
							{{maintenance}}
						</view>
					</view>
					<view class="content-card-btm-box" @tap="jumpRepair(2)">
						<view class="content-card-btm-box-a">
							质保期内
						</view>
						<view class="content-card-btm-box-b">
							{{period}}
						</view>
					</view>
				</view>
			</view>
			<view class="content-order">
				<view class="content-order-b" v-for="(item,index) in orderStatus" :key="index"
					@tap="jumpCheckout(item.id)">
					<view class="content-order-num">
						{{item.num}}
					</view>
					<view class="content-order-title">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="content-work">
				<view :class="['content-work-item',workId==item.id?'active':'']" v-for="(item,index) in work"
					:key='index' @tap="jumpWord(item.id)">
					{{item.title}}
				</view>
			</view>
			<block>
				<view class="content-detail" v-for="(item,index) in wordList" :key='index'>
					<view class="detail-top">
						<view class="left-name">
							{{item.hospital.name}}
						</view>
						<view class="right-name">
							{{item.type_data==0?'报修工单':'维保工单'}}
						</view>
					</view>
					<view class="product">
						<view class="product-left">
							<view class="product-left-name">
								产品名称：<text class="product-name-border">{{item.equipment.name||''}}</text>
							</view>
							<view class="product-left-name">
								设备序列号：<text class="product-name-border">{{item.equipment.serial||''}}</text>
							</view>
							<view class="product-left-name">
								设备型号：<text class="product-name-border">{{item.equipment.marking||''}}</text>
							</view>
							<view class="product-left-name">
								工单ID：<text class="product-name-border">{{item.workID||''}}</text>
							</view>
							<view class="product-left-name" v-if="item.commiss_sale || item.commiss_sale != 0">
								销售提成次数：<text class="product-name-border">{{item.commiss_sale || ''}}</text>
							</view>
							<view class="product-left-name" v-if="item.commiss_eng || item.commiss_eng != 0">
								工程师提成次数：<text class="product-name-border">{{item.commiss_eng || ''}}</text>
							</view>
							<view class="product-left-name">
								收款状态：<text class="product-name-border">{{item.collect_data == 0 ? '应收订单' : '已收款订单'}}</text>
							</view>
							<view class="product-left-name">
								暂停状态：<text class="product-name-border">{{item.open_data == 0 ? '暂停' : '开启'}}</text>
							</view>
							<view class="product-left-name"> 
								亏损状态：<text class="product-name-border">{{item.is_loss == 1 ? '亏损' : '正常'}}</text>
							</view>
							<view class="product-left-name">
								当前指派：<text class="product-left-name-border">{{item.engineer.nickname||'暂无'}}</text>
							</view>
						</view>
						<!-- @tap="transform(item.workID)" -->
						<view class="product-right">
							<!-- @click="open" -->
							<button class="btn" @tap="transform(item.id)" :class="work[0].id==workId?'':'hiddenBtn'" @click="open">改派</button>
						</view>
					</view>
					<view class="order-time">
						<view class="order-time-left">
							<view>{{item.createtime}}</view>
							<view v-if="workId == 6" style="margin-top: 10rpx;">到期时间：{{item.warranty_time_text}}</view>
						</view>
						<view class="order-time-right" @tap="jumpDetail(item.id)">
							详情
						</view>
					</view>
				</view>
			</block>
			<block v-if="wordList.length==0">
				<view class="empty">
					<image src="../../static/empty.png" mode=""></image>
					<text>什么也没有哦...</text>
				</view>
			</block>
		</view>
		<button-btm>
			新建工单
		</button-btm>
		<!-- 模态框 -->
		<uni-popup ref="popup" type="bottom">
			<view class="reassignment">
				<view class="choose">
						<text class="line"></text>
						<text class="text">工程师</text>
				</view>
				<uni-data-select placeholder="请选择工程师"
				        v-model="value"
				        :localdata="reassignment"
				        @change="change"
				      ></uni-data-select>
				<button @tap="submit(id,value)" class="submit-btn" type="primary" size="mini">确认提交</button>
			</view>
		</uni-popup>
	</view>

</template>

<script>
	import {
		mapMutations
	} from 'vuex'
	import buttonBtm from '@/components/button-btm.vue'
	export default {
		components: {
			buttonBtm
		},
		data() {
			return {
				value: 0,//工程师id
				id:0,//工单号
				reassignment: [], //工程师改派数据
				hospitalName: '', //医院名称
				dara_: 0, //报修工单数量
				name_user: '', //当前登录者 名字
				wordList: [], //底部列表
				ongoing: 0, //进行中
				maintenance: 0, //维保工单数量
				period: 0, //质保期内数量
				selectHeight: '', //顶部盒子高度，
				jiaonangHight: '', //胶囊顶部高度
				orderStatus: [{
					id: 1,
					num: 0,
					title: '今日新增',
				}, {
					id: 5,
					num: 0,
					title: '待验收',
				}, {
					id: 3,
					num: 0,
					title: '已完成',
				}, {
					id: 4,
					num: 0,
					title: '全部工单',
				}],
				workId: 0,
				work: [{
					id: 0,
					title: '指派给我'
				}, {
					id: 1,
					title: '进行中'
				}, {
					id: 6,
					title: '质保期内'
				}, {
					id: 3,
					title: '保外'
				}],
				page: 1,
				last_page: 1
			}
		},
		watch: {
			//n新增  o旧值  监听 work选项
			workId(n, o) {
				this.getEngineerList()
				this.wordList = []
				this.page = 1
			}
		},
		onLoad() {
			/* 获取登陆者 姓名 */
			uni.getStorage({
				key: 'userInfo',
				success: (res) => {
					this.name_user = res.data.nickname
				} 
			})

		},
		onShareAppMessage(res) {
		    return {
		      title: '',
		      path: '/pages/index/index'
		    }
		  },
		onShow() {
			this.wordList = []
			this.page = 1
			this.last_page = 1
			/* 获取右上角胶囊高度 */
			this.getMenuHight()
			/* 获取首页数据 */
			this.getIndexData()
			/* 获取当前工程师工单列表 */
			this.getEngineerList()
			/* 获取当前工程师名称列表 */
			this.getEngineerNameList()
		},
		methods: {
			/*获取工单号*/
			transform(id){
				this.id = id
				// console.log(this.id);
			},
			/*获取工程师id*/
			change(e) {
				this.value = e
				// console.log(this.value);
			},
			/*获取工程师名称列表*/
			async	getEngineerNameList(nickname){
				await	this.$https.post('/hospital/getengineer',{
					nickname,
				}).then(res => {
					 if(res.code===1){
						 if(this.reassignment==''){
								this.reassignment = this.reassignment.concat(res.data)
								this.reassignment = this.reassignment.map(v=>{
									return {value:v.id,text:v.nickname}
								})
						 }
					}
				})
			},
			/*改派订单*/
			async	submit(id,value){
				console.log(id)
				console.log(value)
				if(value == 0) return uni.showToast({
					title: '请选择工程师',
					icon: 'none'
				})
				await	this.$https.post('/warranty/appoint',{
					warranty_id:id,
					engineer_id:value
				}).then(res => {
					// console.log(res);
					uni.showToast({
						title:'改派成功',
						icon:'none',
						duration: 2000
					})
				})
				setTimeout(()=>{
					this.$refs.popup.close();
					uni.redirectTo({
							url: '/pages/index/index'
					},2000);
				})
			},
			/* 获取医院列表 */
			jump_serach() {
				uni.navigateTo({
					url: '../serach/serach'
				})
			},
			/* 获取首页数据 */
			getIndexData() {
				this.$https.post('/warranty/engineerNum').then(res => {
					this.orderStatus[3].num = res.data.all; //全部工单
					this.orderStatus[2].num = res.data.done; //已完成
					this.orderStatus[1].num = res.data.accepted; //待验收
					this.orderStatus[0].num = res.data.day_add; //今日新增
					this.maintenance = res.data.maintenance; //维保工单数量
					this.period = res.data.period; //质保期内数量
					this.ongoing = res.data.ongoing //进行中
					this.dara_ = this.orderStatus[3].num - this.maintenance
				})
			},
			/* 获取当前工程师工单列表 */

			getEngineerList() {
				this.$https.post('/warranty/engineerList', {
					status: this.workId,
					type: 3,
					page: this.page,
				}).then(res => {
					if (res.data.last_page != 0) {
						this.last_page = res.data.last_page
					}
				 this.wordList = this.wordList.concat(res.data.data)
				})
			},
			/* 退出登录 */
			...mapMutations(['cleanStorage']),
			logout() {
				uni.showModal({
					title: '退出登录',
					content: '确定退出状态？',
					confirmText: '确定',
					success: res => {
						if (res.cancel) {} else if (res.confirm) {
							uni.clearStorageSync('userInfo')
							this.cleanStorage()
							uni.reLaunch({
								url: '../login/login'
							})
						}
					}

				})
			},
			/* 获取右上角胶囊高度 */
			getMenuHight() {
				let res = wx.getMenuButtonBoundingClientRect()
				this.selectHeight = res.height;
				this.jiaonangHight = res.top;
			},
			jumpWord(id) {
				this.workId = id
			},
			/* 创建订单 */
			btnJump() {
				wx.navigateTo({
					url: '../createOrder/createOrder'
				})
			},
			/* 订单改派 */
			open() {
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open('bottom')
			},
			/* 订单详情 */
			jumpDetail(id) {
				wx.navigateTo({
					url: '../detail/detail?id=' + id
				})
			},
			/* 跳转维保工单   2质保期内   1维保工单*/
			jumpRepair(id) {
				wx.navigateTo({
					url: '../repair/repair?type=' + id
				})
			}, 
			/* 待验收 */
			jumpCheckout(id) {
				if (id != 1) {
					wx.navigateTo({
						url: '../checkout/checkout?type=' + id
					})
				}

			}
		},
		onReachBottom() {
			if (this.page != this.last_page) {
				this.page = this.page + 1
				this.getEngineerList()
			}
		},
	}
</script>

<style scoped lang="scss">
	.empty {
		margin: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
		margin-top: 50px;
		font-size: 12px;
		color: #B6BDBD;
		image {
			width: 75px;
			height: 100px;
		}
	}

	.topBox {
		position: sticky;
		top: 0px;
		z-index: 999;

		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 500;
		color: #181818;
		padding-left: 32rpx;
		background-color: #FFFFFF;

		.topBox_title {
			padding: 0rpx;
			margin: 0rpx;
			float: left;
			margin-right: 10rpx;
			font-size: 32rpx;
		}

		.topBox_img {
			width: 32rpx;
			height: 32rpx;
			margin-left: 20rpx;
			vertical-align: middle;
		}

		image {
			width: 32rpx;
			height: 32rpx;
		}
	}

	.content-order-b {
		flex: 1;
		text-align: center;
		border-right: 2rpx solid #EDEEF2;
	}

	.content-order-b:last-child {
		border-right: none;
	}

	.content-order-num {
		font-size: 36rpx;
		font-weight: 600;
		color: #303030;
		line-height: 52rpx;
	}

	.content-order-title {
		font-size: 24rpx;
		font-weight: 400;
		color: #646466;
		line-height: 32rpx;
	}

	.content {
		padding: 28rpx 32rpx 200rpx;
		background-color: #f6f6fb;

		&-input {
			display: flex;
			align-items: center;
			height: 36rpx;
			background: #FFFFFF;
			border-radius: 44rpx;
			display: flex;
			padding: 26rpx 32rpx 26rpx 24rpx;
			display: flex;
			align-items: center;

			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 34rpx;
			}

			input {
				flex: 1;
			}
		}

		&-card {
			width: 100%;
			height: 316rpx;
			background: url(../../static/index/bgc-card.png);
			background-size: 100% 316rpx;
			margin: 28rpx 0 44rpx;
			position: relative;

			&-left {
				position: absolute;
				top: 38rpx;
				left: 40rpx;

				&-t {
					font-size: 28rpx;
					font-weight: 400;
					color: #FFFFFF;
				}

				&-num {
					font-size: 64rpx;
					font-family: DIN Alternate-Bold, DIN Alternate;
					font-weight: bold;
					color: #FFFFFF;
					line-height: 64rpx;
					margin-right: 10rpx;
				}

				&-a {
					color: #FFFFFF;
					margin-top: 24rpx;
				}
			}

			&-right {
				position: absolute;
				top: 38rpx;
				right: 0px;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				background: rgba(255, 255, 255, .5);
				padding: 12rpx 30rpx 12rpx 24rpx;
				display: flex;
				align-items: center;
				border-radius: 32rpx 0px 0px 32rpx;

				image {
					width: 36rpx;
					height: 36rpx;
					margin-right: 18rpx;
				}
			}

			&-btm {
				position: absolute;
				width: 740rpx;
				left: -32rpx;
				bottom: 40rpx;
				display: flex;

				&-box {
					flex: 1;
					text-align: center;

					&-a {
						font-size: 24rpx;
						font-weight: 400;
						color: #a0bfff;
						margin-bottom: 12rpx;
					}

					&-b {
						font-size: 32rpx;
						font-family: DIN Alternate-Bold, DIN Alternate;
						font-weight: bold;
						color: #FFFFFF;
					}
				}
			}
		}

		&-order {
			width: 100%;
			height: 128rpx;
			background-color: #FFFFFF;
			border-radius: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}

		&-work {
			display: flex;
			padding: 40rpx 0 46rpx;
			justify-content: space-between;

			&-item {
				text-align: center;
				flex: 1;
				font-size: 28rpx;
				font-weight: 400;
				color: #969699;
				line-height: 48rpx;
			}
		}
	}

	.active {
		font-size: 36rpx;
		font-weight: 550;
		color: #141414;
		line-height: 48rpx;
		position: relative;
	}

	.active::before {
		content: '';
		width: 60rpx;
		height: 8rpx;
		border-radius: 8rpx;
		background-color: $public-oclor;
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		margin-left: -30rpx;
	}

	.active::after {
		content: '';
		width: 8rpx;
		height: 8rpx;
		border-radius: 50%;
		background-color: $public-oclor;
		position: absolute;
		bottom: -16rpx;
		left: 50%;
		margin-left: -40rpx;
	}

	.content-detail {
		background-color: #FFFFFF;
		border-radius: 8rpx;
		margin-bottom: 32rpx;
	}

	.detail-top {
		display: flex;
		justify-content: space-between;
		padding: 22rpx 20rpx;
	}

	.left-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #303030;
	}

	.right-name {
		font-size: 28rpx;
		font-weight: 500;
		color: #FFAB00;
		letter-spacing: 4rpx;
	}

	.product {
		display: flex;
		justify-content: space-between;
		// padding: 20rpx;
		border-bottom: 2rpx solid #f6f6fb;
		border-top: 2rpx solid #f6f6fb;

		&-left {
			flex: 1;
			padding-left: 10px;

			&-name {
				font-size: 24rpx;
				font-weight: 400;
				color: #969699;
				margin: 12rpx 0;

				&-border {
					color: #303030;
					font-weight: 500;
				}
			}
		}

		&-right {
			display: flex;
			flex-direction: column;
			justify-content: flex-end;
			width: 100px;

			.btn {
				height: 60rpx;
				line-height: 60rpx;
				padding: 0rpx 48rpx;
				background-color: #1aad19;
				color: #FFFFFF;
				font-size: 28rpx;
				border-radius: 52rpx;
				margin-bottom: 6px;
				border: 0;
			}

			.hiddenBtn {
				display: none;
			}
		}
	}

	.order-time {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 12rpx 20rpx;

		&-left {
			font-size: 24rpx;
			font-weight: 400;
			color: #646466;
		}

		&-right {
			padding: 12rpx 48rpx;
			background-color: $public-oclor;
			color: #FFFFFF;
			font-size: 28rpx;
			border-radius: 52rpx;
		}
	}

	.reassignment {
		width: 100%;
		display: flex;
		flex-direction: column;
		height: 600rpx;
		background-color: #fff;
		padding: 20rpx;
	}
	.choose{
		height: 50rpx;
		margin: 10rpx 20rpx;
	}
		.line{
			margin-top: 10rpx;
			border-left: 4rpx solid blue;
		}
		.text{
			margin-left: 10rpx;
			line-height: 54rpx;
		}
	/deep/.uni-stat__select{
		width: 89%;
		margin: 20rpx;
	}
	.submit-btn{
		border-radius: 52rpx;
		margin-top: 10rpx;
	}
	/deep/ .vue-ref{
		padding: 0 !important;
		border-bottom:20px solid #fff ;
	}
</style>
